フォーカスインジケーター Focus indicator - kii's memo

フォーカスインジケーター Focus indicator

❌背景 Backgoundと見分けしにくい

Accessibility アクセシビリティ Web

キーボード Keyboardで移動

noneにしない

良い見た目のために利用可能性あり

ホバー Hover UI

似たスタイルになるので、一緒にスタイル考えると良い

良い

https://i.gyazo.com/6f795b3faf53291d95e7c7467fb95508.gif

基本は、よく利用されている青色だが、ボタンのprimary colorに合わせて色が変わっている

参考リンク

https://www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/

https://blog.chromium.org/2020/09/giving-users-and-developers-more.html

https://css-tricks.com/focus-management-and-inert/

CSSフレームワークからみる、フォーカス・インジケータの違いを考察 - ME to FE

良いまとめ

css - What is -webkit-focus-ring-color? - Stack Overflow

-webkit-focus-ring-colorで良さそう？

safariだけ、beforeで実装した、checkboxのfocusできない